<template>
  <view>
    <view class="icon-container">
      <image src="/static/happy.png" @click="setMood(true)" />
      <image src="/static/unhappy.png" @click="setMood(false)" />
    </view>
    <view class="score-container">
      <button @click="selectScore(10)">10</button>
      <button @click="selectScore(30)">30</button>
      <button @click="selectScore(60)">60</button>
      <button @click="selectScore(70)">70</button>
      <button @click="selectScore(100)">100</button>
    </view>
    <button @click="submitData" v-if="selectedMood!== null && selectedScore!== null">确定</button>
    <button @click="skip">跳过</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedMood: null,
      selectedScore: null
    };
  },
  methods: {
    setMood(isHappy) {
      this.selectedMood = isHappy;
    },
    selectScore(score) {
      this.selectedScore = score;
    },
    submitData() {
      uni.request({
        url: 'http://your-backend-url', 
        method: 'POST',
        data: {
          mood: this.selectedMood,
          score: this.selectedScore
        },
        success: (res) => {
          console.log('数据提交成功', res);
        },
        fail: (err) => {
          console.error('数据提交失败', err);
        }
      });
    },
    skip() {
      uni.navigateTo({
        url: '/pages/my/my'
      });
    }
  }
};
</script>

<style>
.icon-container {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  align-items: center;
}

.icon-container image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.score-container {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}

button {
  padding: 10px 20px;
  border: none;
  background-color: #f2f2f2;
  cursor: pointer;
}
</style>